<template>
  <a-card title="OpenAi">
    <a-spin tip="Loading..." :spinning="spinning">
      <a-alert
        v-if="spinning"
        message="请稍后......"
        description="正在全力加载."
      >
      </a-alert>
    </a-spin>
    <a-card class="text">
      <div v-for="text in texts" :key="text.index">
        <div v-html="text.text"></div>
      </div>
    </a-card>
    <a-textarea v-model:value="prompt" showCount="true" autosize="true" />
    <a-button type="primary" class="bts" @click="sendMessageAi()">
      提交</a-button
    >
  </a-card>
</template>
<script>
import axios from "axios";
import { ref } from "vue";
import store from '@/store';
export default {
  name: "OpenAi",
  setup() {
    const AIAddress = store.state.web.openaiAddress;
    const texts = ref([]);
    const prompt = ref("");
    const spinning = ref(false);

    const sendMessageAi = () => {
      spinning.value = true;
      axios
        .post(AIAddress, {
          prompt: "请以markdown的形式返回答案且语言为中文" + prompt.value,
        })
        .then((resp) => {
          spinning.value = false;
          texts.value = resp.data.choices;
          prompt.value = "";
        })
        .catch((resp) => {
          console.log(resp);
        });
    };

    return {
      texts,
      prompt,
      spinning,
      sendMessageAi,
    };
  },
};
</script>

<style scoped>
div.text {
  height: 30vh;
  margin-bottom: 20px;
}
.bts {
  margin-top: 20px;
  float: right;
}
</style>